<template>
    <div class="list">
            <ul>
            <li v-for="(item,index) in data" :key="item.id">
                <div class="content">
                <input type="checkbox" :checked="item.isComputed" @change="checkedChange(item,$event)">
                <b>{{item.todo}}</b>
                </div>
                <button @click="handleClick(index)">X</button>
            </li>
            </ul>
        </div>
        <div class="options">
            <button @click="filter('all')">全部</button>
            <span style="color: red; margin-right: 5px; font-size: 18px;">{{props.allCount}}</span>
            <span>条事项</span>
            <button  @click="filter('completed')">已完成:
                <span style="color: red; margin-right: 5px; font-size: 18px;">{{props.completedCount}}</span>
            </button>
            <button  @click="filter('active')">未完成:
                <span style="color: red; margin-right: 5px; font-size: 18px;">{{props.activeCount}}</span>
            </button>
        </div>
</template>


<script setup>
import { createConditionalExpression } from '@vue/compiler-core';
import { defineProps,toRefs,defineEmits } from 'vue';

// 渲染数据
let props = defineProps(['data','allCount','completedCount','activeCount'])
let {data} = toRefs(props)


// 删除事件
let emits = defineEmits(['del','getFlag'])
let handleClick = (index)=>{
    emits('del',index)
}


// 勾选
let checkedChange = (item,e)=>{
    // 通过e.target获取事件对象
    // 事件对象的checked属性赋值给isComputed
    item.isComputed = e.target.checked
    // console.log(e.target)
    // console.log(item.isComputed)
}


// 详情按钮
let filter = (flag)=>{
    emits('getFlag',flag)
    
}

</script>


<style scoped>

 li{
      width: 100%;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .enter{
        display: inline-block;
        flex-grow: .65;
        margin-right: 15px;
    }
    .enter input{
        background: transparent;
        border: 0;
        border-bottom: 3px dashed #00bfff;
        font-size: 18px;
        outline: 0;
        padding: 5px 0 3px;
        width: 100%;
    }
    .list button{
      border: none;
      background-color:white;
      font-size: 16px;
      width: 20px;
      height: 20px;
      display:flex;
      justify-content: center;
      align-items: center;
    }
    ul{
      margin: 0;
      padding: 0;
      margin-top: 20px;
    }

.options button{
  background: transparent;
  border: 1px double #00bfff;
  color: #666;
  cursor: pointer;
  font-size: 16px;
  font-weight: bolder;
  margin: 10px;
  outline: 0;
}

.active{
    background-color: pink;
}
</style>